<script setup>
import { useCreate } from "@/store/useCreate.js";
import { onMounted, ref } from "vue";
import { storeToRefs } from "pinia";

const createStore = useCreate();
const { formData, categoryList } = storeToRefs(createStore);

onMounted(() => {});

//
const rules = {
  typeId: [{ required: true, message: "请选择商品品类", trigger: "blur" }],
  goodsName: [
    { required: true, message: "请输入商品标题", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value.trim() === "") {
          callback(new Error("请输入商品标题"));
        }
        callback();
      },
      trigger: "blur",
    },
  ],
};

const form1 = ref();
const confirm = () => {
  form1.value.validate((valid) => {
    if (valid) {
      createStore.setCurrentStepId(3);
      createStore.setRequiredNumber(2, 0);
    }
  });
};

const typeIdChange = (value) => {
  formData.value.typeName = categoryList.value.find(
    (item) => item.id === value
  ).label;
};
</script>

<template>
  <div class="create-form-items">
    <el-form ref="form1" :model="formData" :rules="rules">
      <el-form-item label="商品品类" label-position="top" prop="typeId">
        <p class="tips">准确的品类，有助于买家快速的搜索到你的商品</p>
        <el-select
          v-model="formData.typeId"
          placeholder="请选择商品品类"
          @change="typeIdChange"
          style="max-width: 600px; height: 48px"
        >
          <el-option
            v-for="item in createStore.categoryList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品标题" label-position="top" prop="goodsName">
        <p class="tips">准确的标题，有助于买家快速的搜索到你的商品</p>
        <el-input
          v-model="formData.goodsName"
          placeholder="例如：我可以为你设计一张电影海报"
          style="max-width: 600px; height: 48px"
          maxlength="30"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-button class="confirm-btn" @click="confirm">确认</el-button>
  </div>
</template>

<style scoped lang="scss">
.create-form-items {
  width: 650px;
}
.tips {
  color: #999;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 16px;
}
.confirm-btn {
  width: 160px;
  height: 48px;
  background: #1dbf73;
  border-radius: 8px 8px 8px 8px;
  color: #fff;
  font-size: 16px;
  margin-top: 48px;
  border: none;
}
</style>

<style>
.create-form-items .el-form-item__label {
  font-weight: bold;
  color: #191e28;
  font-size: 16px;
  margin-bottom: 8px;
}
.create-form-items .el-select__wrapper {
  height: 48px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  box-shadow: none;
}
.create-form-items .el-input__wrapper {
  height: 48px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  box-shadow: none;
}
</style>